<template>
  <div class="formBox">
    <input type="text" v-model="uname" placeholder="账号" />
    <input type="text" v-model="upass" placeholder="密码" />
    <button @click="login()">登录</button>
    <div class="logo">
      <img src="../../../public/wx/hlj-logo.png" alt="" />
    </div>
  </div>
</template>

<script>
import { postdata } from "@/api/postapi.js";

import Vue from "vue";
import { Toast } from "vant";
import { NavBar } from "vant";

Vue.use(Toast, NavBar);

export default {
  data() {
    return {
      uname: "",
      upass: "",
    };
  },
  methods: {
    login() {
      // 如果你想发送post数据 需要修改数据发送的方式
      let usp = new URLSearchParams();
      usp.append("uname", this.uname);
      usp.append("upass", this.upass);

      postdata("/api/login", usp).then((ok) => {
        if (ok.data == 1) {
          Toast.success("登录成功");
          sessionStorage.setItem("login", "true");
          this.$router.push("/Home");
        } else {
          Toast.fail("用户名或密码错误");
        }
      });
    },
  },
};
</script>

<style scoped>
.logo {
  width: 100%;
  margin: 2rem auto;
  text-align: center;
}
.formBox input {
  width: 90%;
  height: 0.8rem;
  margin: 0.4rem 5%;
  text-indent: 0.2rem;
  border-radius: 0.1rem;
  border: 1px solid #e6e6e6;
}
.formBox input:focus {
  border: 1px solid #be865d;
}

button {
  width: 90%;
  height: 1rem;
  margin: 0.6rem 5% 0;
  color: white;
  font-size: 0.3rem;
  background: #313131;
}
</style>